<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no"> 
 <title>Happy Birthday</title>
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <link rel="stylesheet" href="css/memories.css">
 <style>
	 .xuanzhuan{
		 animation: xuanzhuan 15s forwards;
	 }
	 @keyframes xuanzhuan{
		 to{
			 transform: rotateZ(5000deg);
		 }
	 } .ql{
		 position: absolute;
		 left: 200px;
		 color: rgba(255,255,255,1);
		 font-size: 30px;
		 opacity: 0;
		 transition: all 2s;
	 }
 </style>
</head>

<body>
	<!-- <span style="position: relative;top: 10px;left: 200px;color: aliceblue;">
		(手指向上滑进入下一页)
		</span> -->
  <!-- 背景音乐 -->
  <div style="display:none">
    <!-- 网易云外链 -->
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=480353&auto=1&height=66"></iframe>
  </div>
<div class="bgcolor">
  <div style="z-index:100;" id="dowebok">
      <!--第一屏-->
	  <span style="position: relative;
	  left: 200px;
	  color: rgba(255,255,255,1);
	  font-size: 30px;top: 50px;z-index: 77;">(手指上滑进入下一页)</span>
      <div class="section">
          <div class="ly-box01">
            <div class="ly-txt01">
              <p class="ly-stxt01">阳光明媚</p>
              <p class="ly-stxt02">岁月静好</p>
              <p class="ly-stxt03">生活明朗</p>
              <p class="ly-stxt04">万物可爱</p>
              <p class="ly-stxt05">愿你继续被这世界温柔以待</p>
            </div>
            <div class="ly-txt02">
              <p class="ly-stxt06">生日快乐呀</p>
              <p class="ly-stxt07">愿你以后的日子</p>
              <p class="ly-stxt08">都是甜甜的 快乐的 幸福的</p>
              <p class="ly-stxt09">爱自己 爱生活 爱学习 爱你所爱的事物</p>
              <p class="ly-stxt10">祝你：往下拉</p>
            </div>
        </div>
      </div>

      <!--第二屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box11">
              <div class="ly-txt11">
					<!-- 2015 -->
              </div>
              <div class="ly-txt12">
                 
              </div>
              <div class="ly-imgbox11">
                <img class="ly-img11" src="img/2015.jpg">
              </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box12">
              <div class="ly-txt13">
                  
              </div>
              <div class="ly-txt14">
                 <p>祝你</p>
			     <p>百事可乐</p>
			     <p>万事芬达</p>
			     <p>天天哇哈哈</p>
				 <p>月月乐百事</p>
				 <p>----------</p>
				 <p>年年高乐高</p>
				 <p>心情似雪碧</p>
				 <p>永远心飞扬</p>
				 <p></p>
              </div>
          </div>
          <div class="ly-triangle12"></div>
      </div>

      <!--第三屏-->

     <!-- <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box21">
              <div class="ly-txt21">
                  
              </div>
              <div class="ly-txt22">
				<p>2016</p>
                 <p> 祈望你心灵深处芳草永绿</p>
                 <p> 青春常驻</p>
                 <p> 笑口常开</p>
                 <p> </p>
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/2016.jpg">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
              <div class="ly-txt23">
                  
              </div>
              <div class="ly-txt24">
				  <p>2016</p>
                  <p> 祝你生日快乐，</p>
                  <p> 健康幸福！</p>
              </div>
              <div class="ly-imgbox22">
              
              </div>
          </div>
          <div class="ly-triangle22"></div>

           
          <div class="ly-triangle23"></div>
      </div> -->

      <!--第四屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint31"></div>
          <div class="ly-box31">
              <div class="ly-txt31">
                  <!-- 2017 -->
              </div>
              <div class="ly-txt32">
                  <p>因为你又长了一岁</p>
                  <p>又老了一岁</p>
				  <p>抓不住青春的尾巴</p>
				  <p>就闻闻青春的屁了</p>
				  <p>生日快乐！！！</p>
				  <p>哈哈哈哈哈哈。。。。</p>
              </div>
              <div class="ly-imgbox31">
                <img class="ly-img31" src="img/2016.jpg">
              </div>
          </div>
          <div class="ly-triangle31"></div>

          
          <div class="ly-triangle32"></div>
      </div>

  <!--第五屏-->
  <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box52">
              <div class="ly-txt21">
                  寿星佬
              </div>
              <div class="ly-txt22">
                 <p>我祝你所有的希望都能如愿</p>
				 <p>所有的梦想都能实现~</p>
				 <p>所有的等候都能出现</p>
				 <!-- <p>所有的付出都能兑现在你生日来临之即。。。。</p> -->
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/2018.jpg">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <!-- <div class="ly-box22">
              <div class="ly-txt23">
                  201X-0X-1X
              </div>
              <div class="ly-txt51">
                  <p>XXXXXXXXXXXXXX</p>
				          <p>XXXXXXXXXXXXXX</p>
              </div>
              <div class="ly-imgbox22">
                <img class="ly-img22" src="img/1.png">
              </div>
          </div> -->
          <div class="ly-triangle22"></div>

           <div class="ly-box51">
              <div class="ly-txt25">
                 所有的付出都能兑现在你生日来临之即。。。。
              </div>
              <div class="ly-txt26">
                  <p></p>
                  <p></p>
              </div>
              <div class="ly-imgbox23">
                <img class="ly-img23" src="img/2018.jpg">
              </div>
          </div>
          <div class="ly-triangle23"></div>
      </div>

  <!--第六屏2019-->
  <div class="section">
      <div class="timeline"></div>
      <div class="timepoint31"></div>
      <div class="ly-box31">
          <div class="ly-txt31">
              <!-- 2019 -->
          </div>
          <div class="ly-txt32">
              <p>酒越久越醇，朋友相交越久越真；</p>
              <p>水越流越清，世间沧桑越流越淡。</p>
              <p>祝生日快乐，时时好心情!</p>
          </div>
          <div class="ly-imgbox31">
            <img class="ly-img31" src="img/2017.jpg">
          </div>
      </div>
      <div class="ly-triangle31"></div>
  
      
      <div class="ly-triangle32"></div>
  </div>

      <!--第七屏2020-->
     <!-- <div class="section">
          <div class="timeline"></div>
          <div class="timepoint31"></div>
          <div class="ly-box31">
              <div class="ly-txt31">
                  2020
              </div>
              <div class="ly-txt32">
                  <p>祝你：</p>
                  <p>收到我这份诚挚的祝福后，</p>
                  <p>请在耳朵上挂上鞭炮，炮竹声声的同时，</p>
                  <p>用手机疯狂的砸向脑门。</p>
                  <p>这样你就能过一个五彩斑斓而轰轰烈烈的生日了，祝你生日快乐！</p>
              </div>
              <div class="ly-imgbox31">
                <img height="550px" class="ly-img31" src="img/2020.jpg">
              </div>
          </div>
          <div class="ly-triangle31"></div>
      
          <div class="ly-triangle32"></div>
      </div> -->

      <!--第八屏-->

     <!-- <div class="section">
          <div class="timeline"></div>
          <div class="timepoint31"></div>
          <div class="ly-box31">
              <div class="ly-txt31">
                  2021
              </div>
              <div class="ly-txt32">
                 <p>喂!老哥，</p>
                 <p>今天是你的大生日!</p>
                 <p>在这个时刻，</p>
                 <p>我要送给你千万个嘱咐与问候，</p>
                 <p>这是最值钱的“寒酸”!</p>
              </div>
              <div class="ly-imgbox31">
                <img class="ly-img31" src="img/2019.jpg">
              </div>
          </div>
          <div class="ly-triangle31"></div>
      
         
          <div class="ly-triangle32"></div>
      </div> -->

      
	  <div class="section">
	      <div class="timeline"></div>
	      <div class="timepoint31"></div>
	      <div class="ly-box31">
	          <div class="ly-txt31">
	              <!-- 2022 -->
	          </div>
	          <div class="ly-txt32">
	              <p>要到最后啦！</p>
	              <p>往下拉送你个生日礼物！</p>
	          </div>
	          <div class="ly-imgbox31">
	            <img class="ly-img31" src="img/2019.jpg">
	          </div>
	      </div>
	      <div class="ly-triangle31"></div>
	  
	      
	      <div class="ly-triangle32"></div>
	  </div>
		<!--第十屏-->
<div class="section">
	  	  		<span class="ql" style="top: 100px;">三等奖：iPhone14 PRO MAX 512GB</span>
	  			<span class="ql" style="top: 150px;">二等奖：RTX 4090 24G</span>
	  			<span class="ql" style="top: 200px;">一等奖：彬哥帅气亲笔签名自拍照</span>
				
				<div style="position: relative;width:700px;margin:-300px auto;"><img class="zpimg" style="position: absolute;width:100%;border-radius: 50%;" src="img/zp.jpg"/>
	  	  		<img style="width: 93px;
				position: absolute;     
					z-index: 100;
				border-radius: 40%;top: 300px;
    left: 300px;" src="img/zz.png"/>
	<button style="-webkit-appearance: none;
	    -moz-appearance: none;
	         appearance: none;
		  		outline: 0;
		  		background-color: white;
		  	  border: 0;
		  	  padding: 10px 15px;
		  	  color: #ee9ca7;
		  	  border-radius: 3px;
		  	  width: 250px;
		  	  cursor: pointer;
		  	  font-size: 18px;
			  position: absolute;
			  top: 750px;
			  left: 250px;
			  z-index: 9999;
	   height: 50px;transition: all 2s;" class="begin">开始</button>
		</div>
	  	  		
	  	
	  	    </div>
  <!--动态方块-->
  <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>
  <!-- <audio muted src="music/1.mp3" autoplay="autoplay" loop="loop"></audio> -->

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- <script src="js/auto-play.js"></script> -->
<script src="js/memories.js"></script>
<script>
	$('.begin').on('click',function(){
		// console.log(1)
		$('.zpimg').addClass('xuanzhuan')
		
		$(this).css('opacity','0')
		$('.ql').css('opacity','1')
		setTimeout(()=>{
			alert('很荣幸，您获得了一等奖！请截图发给彬哥领取')
		},15000)
	})
</script>
</body>
</html>
